<template>
  <div>
    <van-tabs v-model="active" @click="clickTab">
      <van-tab v-for="item in navigationArr" :key="item.id" :title="item.name">
        <h1>{{ item.name }}</h1>
        <p>{{ item.front_desc }}</p>
      </van-tab>
    </van-tabs>

    <ul>
      <li v-for="item in categoyArr" :key="item.id">
        <img v-lazy="item.list_pic_url" alt="" />
        <p>{{ item.name }}</p>
        <span>￥{{ item.retail_price }}元</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { category } from "@/api/channel.js";
import { categoylist } from "@/api/channel.js";
export default {
  name: "",
  data() {
    return {
      active: "", //绑定当前选中标签的标识符
      navigationArr: [], //导航数组
      currentCategory: [], //当前页面数据
      page: 1, //当前页数
      size: 1000, //每页显示个数
      categoyArr: [], //商品数据
      name: "",
      front_desc: "",
    };
  },
  mounted() {
    //   console.log(this.$route.query.id);
    category({ id: this.$route.query.id }).then((res) => {
      //   console.log(res);
      //导航赋值
      this.navigationArr = res.data.brotherCategory;
      //当前页赋值
      this.currentCategory = res.data.currentCategory;

      this.navigationArr.forEach((item, index) => {
        if (this.$route.query.id == item.id) {
          this.active = index; //  当前选中的商品下标
        }
      });
      //   console.log(this.active);
    });

    this.gitlist(this.$route.query.id);

    //   console.log(this.id);
  },
  methods: {
    gitlist(id) {
      categoylist({
        categoryId: id,
        page: this.page,
        size: this.size,
      }).then((res) => {
        //   console.log(res);
        this.categoyArr = res.data.goodsList;
      });
    },
    clickTab(id) {
        //吊接口传参数id
      this.gitlist(this.navigationArr[id].id);
      // console.log(id);
    },
  },
};
</script>
<style scoped lang="less">
div {
  width: 100%;
}
.top {
  width: 375px;
  height: 35px;
  display: flex;
  overflow: auto;
  align-items: center;
  .dh {
    width: 55px;
    font-size: 16px;
  }
}
h1 {
  margin-top: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
p {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
}
ul {
  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    height: 260px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    img {
      width: 100%;
      height: 70%;
    }
    p {
      text-align: center;
      line-height: 20px;
    }
    span {
      margin-top: 15px;
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>